<template>
<div id="app" class="app">

	<router-view/>

	<!-- <a href="javascript:;" @click='test'>sss</a>
	<p>{{count.isLoading}}</p>
	<a href="javascript:;" @click='storeClick'>click store</a> -->
</div>
</template>

<script>
import {
	mapState
} from 'vuex'

export default {

	name: 'App',
	components: {

	},
	methods: {
		test() {
			console.log(this.$store.state.myIsLoading.isLoading);
			this.$http.get('/api/data').then(res => {
				console.log(res)
			})
		},
		storeClick() {
			this.$store.commit('updateLoadingStatus', {
				isLoading: true
			})
		}
	},
	computed: {
		...mapState({
			// 箭头函数可使代码更简练
			count: state => state.myIsLoading,
			// 传字符串参数 'count' 等同于 `state => state.count`
			myIsLoading: 'myIsLoading',
			// 为了能够使用 `this` 获取局部状态，必须使用常规函数
			countPlusLocalState(state) {
				return state.myIsLoading
			}
		})
	}

}
</script>

<style >
body,
html,
p,
ul,
li {
	margin: 0;
	padding: 0;
}

#app {}
</style>
<style src="./my-component.css"></style>
